<!DOCTYPE html>
<html class="x-admin-sm">
<head>
	<meta charset="UTF-8">
	<title>电子学会比赛管理系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
	<link rel="stylesheet" href="./css/font.css">
	<link rel="stylesheet" href="./css/xadmin.css">
	<script type="text/javascript" src="./js/abkj/auth/api/role.js"></script>
	<script type="text/javascript" src="./js/abkj/fun_tool.js"></script>
	<script type="text/javascript" src="./js/abkj/slAjax.js"></script>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="./js/xadmin.js"></script>
	<script type="text/javascript" src="./js/abkj/ext/login.js"></script>
	<!--[if lt IE 9]>
	<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>
<div class="x-nav">
  <span class="layui-breadcrumb">
    <a href="">首页</a>
    <a href="">系统管理</a>
    <a>
      <cite>角色管理</cite></a>
  </span>
	<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
		<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-body ">

				</div>
				<div class="layui-card-header">
					<button class="layui-btn" onclick="xadmin.open('添加角色','role-add.html',600,400)"><i class="layui-icon"></i>添加</button>
				</div>
				<div class="layui-card-body">
					<table class="layui-table layui-form" v-cloak id="table">
						<span>共计{{ total }}条数据</span>
					</table>
				</div>
				<div class="layui-card-body">
					<div id="page"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/html" id="operate">
<a title="编辑" class="layui-table-link" onclick="xadmin.open('编辑角色','role-add.html?id={{d.id}}&name={{d.name}}',600,400)" href="javascript:;">
	编辑
</a>
<a title="删除" class="layui-table-link" onclick="deletemydata('{{d.id}}')" href="javascript:;">
	删除
</a>
</script>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/abkj/slAjax.js"></script>
<script src="./js/vue.min.js"></script>
<script>
function deletemydata(id){
	if (id<5||id==5){
			alert("该角色是系统角色，无法删除！")
			return false
	}
	  if (confirm("是否删除角色?")){

			delRole(id,function(data){
			 alert("删除成功！")
			 location.reload()
		 })
		}
}
$(function () {
	new Vue({
		el: '.layui-fluid',
		data: {
			roleList:[],
			pageNo: 1,
			pageSize: 10,
			total: 0
		},
		mounted: function () {
			var vm = this
			layui.use(['laypage', 'form', 'table'], function () {
				var form = layui.form
				form.on('submit(search)', vm.getData)
				vm.getData()
				//执行一个laydate实例
			})
		},
		methods: {
			loadRolePageList:function(){
				var varReqParam={

				}
				RolePageList(varReqParam,function(data){
					app.roleList=data.records;
					app.pageNo=data.current;
					app.pageSize=data.size;
					app.total=data.total;

				});
			},
			getData: function (data) {
				var vm = this

				function getRoleData(query, fnSuccess, fnError) {
					fnSuccess({
						total: 30,
						records: [
							{role: '赛区管理员', roleId: 1, roleList: ['1', '2', '3', '4']},
							{role: '裁判', roleId: 2, roleList: ['1', '4']},
							{role: '管理员', roleId: 3, roleList: ['1', '2', '3', '4']}
						]
					})
				}

				RolePageList({
					page: {
						current: vm.pageNo, size: vm.papeSize
					}
				}, function (data) {
					// alert(JSON.stringify(data))
					vm.total = data.total

					layui.table.render({
						elem: '#table',
						cols: [[
							{field: 'index', title: '序号'},
							{field: 'name', title: '角色'},
							{field: 'action', title: '操作', templet: '#operate'}
						]],
						count: vm.total,
						limit: vm.pageSize,
						data: data.records.map(function (item, index) {
							item.index = index+(vm.pageNo-1)*vm.pageSize
							return item
						})
					})
					layui.laypage.render({
						elem: 'page',
						curr: vm.pageNo,
						count: vm.total,
						jump: function (obj, first) {
							if (first) return
							vm.pageNo = obj.curr
							vm.getData()
						}
					})
				}, function () {

				})

			}
		}
	})
})

/*用户-停用*/
function member_stop(obj, id) {
	layer.confirm('确认要停用吗？', function (index) {

		if ($(obj).attr('title') == '启用') {

			//发异步把用户状态进行更改
			$(obj).attr('title', '停用')
			$(obj).find('i').html('&#xe62f;')

			$(obj).parents('tr').find('.td-status').find('span').addClass('layui-btn-disabled').html('已停用')
			layer.msg('已停用!', {icon: 5, time: 1000})

		} else {
			$(obj).attr('title', '启用')
			$(obj).find('i').html('&#xe601;')

			$(obj).parents('tr').find('.td-status').find('span').removeClass('layui-btn-disabled').html('已启用')
			layer.msg('已启用!', {icon: 5, time: 1000})
		}

	})
}

/*用户-删除*/
function member_del(obj, id) {
	layer.confirm('确认要删除吗？', function (index) {
		//发异步删除数据
		$(obj).parents('tr').remove()
		layer.msg('已删除!', {icon: 1, time: 1000})
	})
}


function delAll(argument) {

	var data = tableCheck.getData()

	layer.confirm('确认要删除吗？' + data, function (index) {
		//捉到所有被选中的，发异步进行删除
		layer.msg('删除成功', {icon: 1})
		$('.layui-form-checked').not('.header').parents('tr').remove()
	})
}
</script>
<script>var _hmt = _hmt || [];
(function () {
	var hm = document.createElement('script')
	hm.src = 'https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190'
	var s = document.getElementsByTagName('script')[0]
	s.parentNode.insertBefore(hm, s)
})()</script>
</html>
